<script setup>
import { getHomeData } from '@/api/home'
import { onMounted, ref } from 'vue'
import year from './components/year.vue'
import month from './components/month.vue';
import device from './components/device.vue';
import zhejiang from './components/zhejiang.vue';
import rank from './components/rank.vue';
import pie from './components/pie.vue';
const homeData = ref({})
onMounted(() => {
    getHomeAPI()
})
// 获取首页数据
const getHomeAPI = async () => {
    const result = await getHomeData()
    homeData.value = result
}
</script>
<template>
    <div class="container">
        <!-- 头部区域 -->
       <div class="header"></div>
       <!-- 中间区域 -->
       <div class="main">
         <div class="left">
            <!-- 年产量 -->
            <div class="year chart-panel">
                <year></year>
            </div>
            <!-- 月产量 -->
            <div class="month chart-panel">
                <month></month>
            </div>
            <!-- 链接设备 -->
            <div class="device chart-panel">
                <device></device>
            </div>
         </div>
         <div class="center">
            <div class="map">
                <zhejiang></zhejiang>
            </div>
         </div>
         <div class="right">
            <!-- 企业数 -->
            <div class="company chart-panel"></div>
            <!-- 真品 -->
            <div class="real chart-panel">
                <pie></pie>
            </div>
            <!-- 排名 -->
            <div class="rank chart-panel">
                <rank></rank>
            </div>
         </div>
       </div>
       <!-- 底部区域 -->
       <div class="bottom">
         <div class="back"></div>
       </div>
    </div>
</template>
   
<style scoped lang="scss">
  .container {
    width: 100%;
    height: 100vh;
    background-image: url('/img/back.png');
    background-size: cover;
    
    .header {
        background-image: url('/img/header.png');
        background-size: cover;
        width: 100%;
        height: 86px;
    }
    .main {
        display: flex;
        .left, .right {
            flex: 1;
            height: 100%;
            .chart-panel {
                width: 100%;
                height: 230px;
                margin-bottom: 20px;
                .chart {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .center {
            width: 900px;
            height: 780px;
            background-image: url('/img/center.png');
            background-size: cover;
            z-index: 999;
            margin: 20px 0;
        }
    }
    .bottom {
        .back {
            background-image: url('/img/bottom.png');
            background-size: cover;
            width: 100%;
            height: 100%;
            margin: 0 auto;
        }
        width: 1400px;
        height: 207px; 
        margin: 0 auto;
        position: absolute;
        bottom: 35px;
        left: 50%;
        margin-left: -700px;
    }
  } 
</style>